<template>
    <div @click="linkto" class="item">

        <img :src="novelitem.picUrl" alt="">
        <div class="right">
            <p>{{ novelitem.name }}</p>
            <p>{{ novelitem.brief }}</p>
            <slot>
                <p>{{ novelitem.evaluate }}</p>
            </slot>
            <p><van-icon name="like" />{{ novelitem.lv }}</p>


        </div>


    </div>
</template>

<script>
export default {
    props: {
        novelitem: {
            type: Object,

            default: () => {
                return {
                    picUrl: "https://bookcover.yuewen.com/qdbimg/349573/1034360760/150",
                    brief: "The Hidden Princess And Seven Nobles",
                    name: "斗破苍穹",
                    author: "天蚕土豆",
                    id: "13",
                    lv: 4.5,
                    evaluate: "Ara never thought that she would experience betrayal, she was killed by someone she trusted so much. Thinking she was dead but nothing, she came back to life in a different body and a different world. In a world that is far from modern, slavery and murder are very commonplace. Reviving in a different body did not make her happy, she was faced with two choices between life and death again, became one of the entertainer slaves at a hunting event held once a month by the superior sons of the kingdom, including the crown prince."
                }
            }
        }
    },
    methods: {
        linkto() {
            if (this.$props.novelitem.sort) {

                this.$router.push({ name: 'reader', params: { id: this.$props.novelitem.id, sort: this.$props.novelitem.sort } })

            } else {
                this.$router.push({ name: 'novel', params: { id: this.$props.novelitem.id, sort: 1 } })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    width: 100%;
    margin: 0.2rem;
    overflow: hidden;

    img {
        width: 3rem;
        height: 4rem;
    }
}

.right {
    flex: 1;
    margin-left: 0.3rem;
    min-width: 0;

    p {


        font-size: 0.3rem;
        /*1.先强制一行内显示文本*/
        white-space: nowrap;
        /*2.超出的部分隐藏*/
        overflow: hidden;
        /*3.文字用省略号替代超出的部分*/
        text-overflow: ellipsis;

        &:nth-child(1) {
            font-size: 0.6rem;
            color: #4b73f6;
            // line-height: 1.1rem;
        }

        &:nth-child(2) {
            font-size: 0.4  rem;

            line-height: 1rem;
        }

        &:nth-child(3) {
            font-size: 0.5rem;
            line-height: 0.7rem;
            color: #4b73f6;
            white-space: normal;
            overflow: hidden;


            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;

            /*限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp: 3;

            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;

        }

        &:nth-child(4) {
            line-height: 1rem;
        }
    }
}
</style>